<div ng-controller="LaunchInstanceNetworkPortController as ctrl">
  <p class="step-description" translate>
    Ports provide extra communication channels to your instances. You can select ports instead of networks or a mix of both.
  </p>

  <transfer-table tr-model="ctrl.tableDataMulti" help-text="ctrl.tableHelpText" limits="ctrl.tableLimits">
    <allocated>
      <table st-table="ctrl.tableDataMulti.displayedAllocated" st-safe-src="ctrl.tableDataMulti.allocated"
             hz-table class="table table-striped table-rsp table-detail">
        <thead>
          <tr>
            <th class="reorder"></th>
            <th class="expander"></th>
            <th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
            <th class="rsp-p2" translate>IP</th>
            <th st-sort="admin_state" class="rsp-p1" translate>Admin State</th>
            <th st-sort="status" class="rsp-p1" translate>Status</th>
            <th class="actions_column"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-if="ctrl.tableDataMulti.allocated.length === 0">
            <td colspan="7">
              <div class="no-rows-help" translate>
                Select an item from Available items below
              </div>
            </td>
          </tr>
          <tr ng-repeat-start="item in ctrl.tableDataMulti.displayedAllocated track by item.id"
              lr-drag-data="ctrl.tableDataMulti.displayedAllocated" lr-drag-src="reorder"
              lr-drop-target="reorder" lr-drop-success="trCtrl.updateAllocated(e, item, collection)">
            <td class="reorder">
              <span class="fa fa-sort" title="{$ 'Re-order items using drag and drop'|translate $}"></span>
              {$ $index + 1 $}
            </td>
            <td class="expander">
                <span class="fa fa-chevron-right" hz-expand-detail
                      title="{$ 'Click to see more details'|translate $}"></span>
            </td>
            <td class="rsp-p1 word-break">{$ ctrl.nameOrID(item) $}</td>
            <td class="rsp-p2">
              <div ng-repeat="ip in item.fixed_ips">
                  <span translate
                        translate-params-address="ip.ip_address"
                        translate-params-subnet="item.subnet_names[ip.ip_address]">
                  {$ address $} on subnet {$ subnet $}
                  </span>
              </div>
            </td>
            <td class="rsp-p1">{$ item.admin_state | decode:ctrl.portAdminStates $}</td>
            <td class="rsp-p1">{$ item.status | decode:ctrl.portStatuses $}</td>
            <td class="actions_column">
              <action-list>
                <action action-classes="'btn btn-default'"
                        callback="trCtrl.deallocate" item="item">
                  <span class="fa fa-arrow-down"></span>
                </action>
              </action-list>
            </td>
          </tr>
          <tr ng-repeat-end class="detail-row">
            <td colspan="7" class="detail">
              <dl class="dl-horizontal">
                <dt translate>ID</dt>
                <dd>{$ item.id $}</dd>
                <dt translate>Project ID</dt>
                <dd>{$ item.tenant_id $}</dd>
                <dt translate>Network ID</dt>
                <dd>{$ item.network_id $}</dd>
                <dt translate>Network</dt>
                <dd>{$ item.network_name $}</dd>
                <dt translate>VNIC type</dt>
                <dd>{$ item['binding:vnic_type'] | decode:ctrl.vnicTypes $}</dd>
                <div ng-if="item['binding:host_id']">
                  <dt translate>Host ID</dt>
                  <dd>{$ item['binding:host_id'] $}</dd>
                </div>
              </dl>
            </td>
          </tr>
        </tbody>
      </table>
    </allocated>

    <available>
      <table st-table="ctrl.tableDataMulti.displayedAvailable" st-safe-src="ctrl.tableDataMulti.available"
        hz-table class="table table-striped table-rsp table-detail">
        <thead>
          <tr>
            <th class="search-header" colspan="6">
              <hz-search-bar icon-classes="fa-search"></hz-search-bar>
            </th>
          </tr>
          <tr>
            <th class="expander"></th>
            <th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
            <th class="rsp-p2" translate>IP</th>
            <th st-sort="admin_state" class="rsp-p1" translate>Admin State</th>
            <th st-sort="status" class="rsp-p1" translate>Status</th>
            <th class="actions_column"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-if="trCtrl.numAvailable() === 0">
            <td colspan="6">
              <div class="no-rows-help" translate>
                No available items
              </div>
            </td>
          </tr>
          <tr ng-repeat-start="item in ctrl.tableDataMulti.displayedAvailable track by item.id"
              ng-if="!trCtrl.allocatedIds[item.id]">
            <td class="expander">
                <span class="fa fa-chevron-right" hz-expand-detail
                      title="{$ 'Click to see more details'|translate $}"></span>
            </td>
            <td class="rsp-p1 word-break">{$ ctrl.nameOrID(item) $}</td>
            <td class="rsp-p2">
                <div ng-repeat="ip in item.fixed_ips">
                  <span translate
                        translate-params-address="ip.ip_address"
                        translate-params-subnet="item.subnet_names[ip.ip_address]">
                  {$ address $} on subnet {$ subnet $}
                  </span>
                </div>
            </td>
            <td class="rsp-p1">{$ item.admin_state | decode:ctrl.portAdminStates $}</td>
            <td class="rsp-p1">{$ item.status | decode:ctrl.portStatuses $}</td>
            <td class="actions_column">
              <action-list>
                <action action-classes="'btn btn-default'"
                        callback="trCtrl.allocate" item="item">
                  <span class="fa fa-arrow-up"></span>
                </action>
              </action-list>
            </td>
          </tr>
          <tr ng-repeat-end class="detail-row">
            <td colspan="6" class="detail">
              <dl class="dl-horizontal">
                <dt translate>ID</dt>
                <dd>{$ item.id $}</dd>
                <dt translate>Project ID</dt>
                <dd>{$ item.tenant_id $}</dd>
                <dt translate>Network ID</dt>
                <dd>{$ item.network_id $}</dd>
                <dt translate>Network</dt>
                <dd>{$ item.network_name $}</dd>
                <dt translate>VNIC type</dt>
                <dd>{$ item['binding:vnic_type'] | decode:ctrl.vnicTypes $}</dd>
                <div ng-if="item['binding:host_id']">
                  <dt translate>Host ID</dt>
                  <dd>{$ item['binding:host_id'] $}</dd>
                </div>
              </dl>
            </td>
          </tr>
        </tbody>
      </table>
    </available>
  </transfer-table>
</div>
